<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" :size="formSize" status-icon>
    <el-divider :border-style="'dashed'" content-position="left"><span class="divider-text">公司信息</span></el-divider>
    <el-form-item label="公司名称" prop="company" style="width: 450px">
      <el-input v-model="ruleForm.company" show-word-limit maxlength="30" placeholder="请输入公司名称" />
    </el-form-item>
    <el-form-item label="公司简介" prop="companyInfo" style="width: 800px">
      <el-input v-model="ruleForm.companyInfo" autosize show-word-limit maxlength="300" type="textarea"
        placeholder="简单介绍一下公司吧~" />
    </el-form-item>
    <el-divider class="divider" :border-style="'dashed'" content-position="left"><span
        class="divider-text">实习信息</span></el-divider>
    <el-row>
      <el-col :span="12">
        <el-form-item label="岗位名称" prop="station" style="width: 450px">
          <el-input v-model="ruleForm.station" show-word-limit maxlength="20" placeholder="请输入岗位名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实习部门" prop="department" style="width: 450px">
          <el-input v-model="ruleForm.department" placeholder="请输入实习部门" show-word-limit maxlength="20" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="实习地址" prop="address" style="width: 450px">
          <el-input v-model="ruleForm.address" show-word-limit maxlength="50" placeholder="请输入实习地址" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="薪资待遇" prop="salary" style="width: 450px">
          <el-input v-model="ruleForm.salary" show-word-limit maxlength="20" placeholder="请输入薪资待遇" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="工作内容" prop="work" style="width: 800px">
      <el-input v-model="ruleForm.work" autosize show-word-limit maxlength="500" type="textarea"
        placeholder="每条要求之间请按回车换行：实习生入职后从事哪些工作内容" />
    </el-form-item>
    <el-form-item label="实习/岗位要求" prop="requirement" style="width: 800px">
      <el-input v-model="ruleForm.requirement" autosize show-word-limit maxlength="500" type="textarea"
        placeholder="每条要求之间请按回车换行：对学校、专业、实习时长、技能、能力、兴趣......的要求" />
    </el-form-item>
    <el-form-item label="实习生收获" prop="obtained" style="width: 800px">
      <el-input v-model="ruleForm.obtained" type="textarea" autosize show-word-limit maxlength="200"
        placeholder="实习生可以收获到什么？" />
    </el-form-item>
    <el-divider class="divider" :border-style="'dashed'" content-position="left"><span
        class="divider-text">简历投递</span></el-divider>
    <el-row>
      <el-col :span="12">
        <el-form-item label="简历投递邮箱" prop="email" style="width: 450px">
          <el-input v-model="ruleForm.email" show-word-limit maxlength="50" placeholder="请输入简历投递邮箱" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮件主题及附件" prop="emailFormat" style="width: 450px">
          <el-input v-model="ruleForm.emailFormat" placeholder="例:姓名－学校－专业－每周实习天数" show-word-limit maxlength="50" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="备注" prop="notes" style="width: 800px">
      <el-input v-model="ruleForm.notes" type="textarea" autosize show-word-limit maxlength="200" placeholder="备注" />
    </el-form-item>
    <el-form-item label="截止时间" prop="expire" style="width: 450px">
      <el-date-picker v-model="ruleForm.expire" type="date" label="简历投递截止时间" placeholder="简历投递截止时间" style="width: 100%"
        format="YYYY-MM-DD" value-format="x" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        发布实习
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- <el-tabs>
    <el-tab-pane label="User">
    </el-tab-pane>
    <el-tab-pane label="Config">Config</el-tab-pane>
  </el-tabs> -->
</template>

<script setup>
import { reactive, ref } from "vue";
import { apiAddPracticeInfo } from "../apis/practiceApi";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";

const formSize = ref("default");
const ruleFormRef = ref();
const nowDate = new Date();

const ruleForm = reactive({
  company: "", //公司名称
  department: "", //实习部门
  address: "", //工作地址
  work: "", //工作内容
  requirement: "", //实习要求
  salary: null, //薪资待遇
  station: "", //岗位
  companyInfo: "", //公司简介
  email: "", //邮箱
  notes: "", //备注
  emailFormat: "岗位-姓名－学校－专业－每周实习天数", //邮件主题及附件
  obtained: "", //实习收获
  expire:"",//简历投递截止时间
  // expire: nowDate.setMonth(nowDate.getMonth() + 1), //简历投递截止时间
});

const rules = reactive({
  company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  work: [
    {
      required: true,
      message: "请输入工作内容",
      trigger: "change",
    },
  ],
  requirement: [
    {
      required: true,
      message: "请输入实习/岗位要求",
      trigger: "change",
    },
  ],
  station: [
    {
      required: true,
      message: "请输入岗位名称",
      trigger: "change",
    },
  ],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
  emailFormat: [{ required: true, message: "请输入邮箱格式", trigger: "blur" }],
  // expire: [{ required: true, message: "请输入截止日期", trigger: "blur" }],
});

/**
 * val  1成功发布，2去审核
 */
const publish = (val, formEl) => {
  try {
    const loading = ElLoading.service({
      lock: true,
      text: "Loading...",
      background: "rgba(0, 0, 0, 0.7)",
    });
    apiAddPracticeInfo({
      data: {
        ...ruleForm,
        currentTime: new Date().getTime(),
        publishType: val,
      },
      userId: parseFloat(sessionStorage.getItem("userId")),
      token: sessionStorage.getItem("token"),
    })
      .then((res) => {
        if (res.code > 0) {
          ElMessage({
            message: val===2?"已提交审核！":"发布成功！",
            type: "success",
          });
          formEl.resetFields();
        } else {
          ElMessage({
            message: "发布失败！" + res.msg,
            type: "error",
          });
        }
      })
      .finally(() => {
        loading.close();
      });
  } catch (error) {
    ElMessage({
      message: JSON.stringify(error),
      type: "error",
    });
  }
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!sessionStorage.getItem("token")) {
        publish(2, formEl);
      } else {
        publish(1, formEl);
      }
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
.el-form {
  background-color: white;
  padding: 20px;
}

.divider {
  margin-top: 50px;
}

.divider-text {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-weight: 600;
}
</style>
